<template>
  <div class="number-select-box">
    <div class="select-row border-bottom">
      <div class="top">
        <tail-box :place="item.place.context" class="adjust"></tail-box>
        <div class="cleaner">
          <div 
            class="clear button-unselected" 
            @click="handleBtnClear"
            >
            <span class="icon" :class="count == 0 ? '' : 'active'"><i class="iconfont iconty_qingkong"></i></span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="row1">
          <lottery-box
            ref="lotterybox"
            class="box-adjust"
            v-for="(number, index) in item.numbers"
            :key="number.id"
            :content="number.number"
            :parameter="number.parameter[activeSwitchIndex].number"
            :class="number.selected ? 'active' : ''"
            @click.native="handleBallSelect(index)">
          </lottery-box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LotteryBox from '@/components/base/lottery-box/lottery-box'
import TailBox from '@/components/tail-box/tail-box'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    LotteryBox,
    TailBox
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: 0,
              selected: false,
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                }
              ]
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
     handleBallSelect(index, type) {
      this.count = 0
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      // 选中后赔率变金额
      if (numbers[index].selected) {
        numbers[index].parameter[this.activeSwitchIndex].parameter = numbers[index].parameter[this.activeSwitchIndex].number
        // console.log(parameter)
        numbers[index].parameter[this.activeSwitchIndex].number = this.getUnitPrice 
        numbers[index].unitPrice = this.getUnitPrice 
      } else {
        numbers[index].parameter[this.activeSwitchIndex].number = numbers[index].parameter[this.activeSwitchIndex].parameter
        numbers[index].unitPrice = 0
      }
      this.$emit('click', this.clonedItem)

    },
    // 清空按钮清空选中状态
    handleBtnClear() {
      this.clear()
    },
    clear() {
      this.clonedItem.numbers.forEach(item => {
        item.selected = false
        // 清空状态时将金额清除
        if(item.parameter[this.activeSwitchIndex].parameter) {
          item.parameter[this.activeSwitchIndex].number = item.parameter[this.activeSwitchIndex].parameter
        }
      })
      this.$emit('click', this.clonedItem)
      this.count = 0
    },
     // 统计选中彩票个数
    countNumber(numbers) {
      numbers.forEach(value => {
        if (value.selected)  {
          this.count++
        }
      })
    },
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
    ...mapGetters('lottery', ['getUnitPrice', 'getUnitRate'])
  },
  watch: {
    item(newVal) {
      this.count = 0
      this.countNumber(newVal.numbers)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
      .bottom >>> .box 
        width 100%
        // min-width 63px
        height 54px
        margin-bottom 10px
      .select-row >>> .top 
        .tail-box 
          width 45px
          height 24px
          line-height 24px
        .cleaner 
          .clear 
            width 50px 
            height 30px !important
            line-height 30px !important 
      .select-row
        display flex
        flex-direction column
        width 100%
        justify-content space-between
        box-sizing border-box
        padding 0 10px
        .top
          display: flex
          height 50px
          align-items center
          .cleaner
            flex 1 
            display flex 
            justify-content flex-end
            .clear 
              width 50px
              height 32px 
              line-height 32px
              text-align center
              border-radius 16px
              .active 
                color $color-theme-red
        .bottom 
          .row1
            display flex
            justify-content space-between
            flex-wrap wrap 

         
          
          
          

</style>